<template>
  <div class="app" :class="themeClass" :style="{minHeight: windowHeight}">

    <div class="header-title">Explore</div>

    <scroll-view
        scroll-y
        :style="{height: scrollHeight}"
    >
      <div class="delicacies">
        <div class="list" v-for="(value, id) in delicaciesList" :key="id">
          <div class="title">
            Markets
            <div class="info color-text-secondary" @click="toTopicList">View All (123)</div>
          </div>

          <div style="margin-left: 15px">

            <swiper
                :indicator-dots="indicatorDots"
                :autoplay="autoplay"
                :interval="interval"
                :duration="duration"
                display-multiple-items="1"
                next-margin="190rpx"
            >
              <block v-for="(item, index) in value.list" :key="index">
                <swiper-item>
                  <div class="card container-background-color" @click="toGoods">
                    <image mode="aspectFill" class="goods-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557421323320&di=07c7a8434a8c79f23955aed36b441665&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fproducts%2F20150423%2Ftooopen_46116371.jpg"></image>
                    <div class="box">
                      <div class="name">
                        Sweety Cake
                        <div class="text-right color-text-regular">
                          75m
                        </div>
                      </div>
                      <div class="info color-text-secondary">70,Nevsky Avenue</div>
                      <div class="rate">
                        <van-rate :value="rate" size="12" />
                      </div>
                    </div>
                  </div>
                </swiper-item>
              </block>
            </swiper>
          </div>

        </div>
      </div>
    </scroll-view>

  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  components: {
  },
  computed: {
    ...mapState('shop', {
      windowHeight: state => state.theme.windowHeight
    }),
    ...mapGetters('shop', {
      activeSetting: 'theme/activeSetting'
    }),
    themeClass: function () {
      return `theme-` + this.activeSetting.name
    },
    scrollHeight: function () {
      return `${parseInt(this.windowHeight) - 44}px`
    }
  },
  data () {
    return {
      delicaciesList: [
        {
          title: '122',
          list: [
            {
              id: 1,
              name: '3w333'
            },
            {
              id: 2,
              name: '3w333'
            },
            {
              id: 3,
              name: '3w333'
            }
          ]
        },
        {
          title: '122',
          list: [
            {
              id: 1,
              name: '3w333'
            },
            {
              id: 2,
              name: '3w333'
            },
            {
              id: 3,
              name: '3w333'
            }
          ]
        }
      ],
      rate: 5,
      imgUrls: [
        'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
        'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
        'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
      ],
      indicatorDots: false,
      autoplay: false,
      interval: 5000,
      duration: 1000
    }
  },
  beforeCreate () {},
  created () {
    // 获取页面高度
    this.$store.dispatch('shop/theme/getSystemInfo')
  },
  beforeMount () {},
  mounted () {},
  onLoad (options) {},
  onReady () {},
  onShow () {},
  onHide () {},
  onUnload () {},
  /**
   * for other event handlers, please check https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
   */
  methods: {
    toTopicList () {
      Megalo.navigateTo({ url: '/pages/topic/list/index' })
    },
    toGoods () {
      Megalo.navigateTo({ url: '/pages/goods/index' })
    }
  }
}
</script>

<style lang="scss">
  .app {
    .header-title {
      margin: 0 30px;
      height: 44px;
      font-weight: bold;
      line-height: 44px;
      font-size: 18px;
    }
    .delicacies {
      .list {
        margin-bottom: 10px;
        .title {
          margin: 0 15px;
          height: 44px;
          line-height: 44px;
          font-size: 14px;
          .info {
            float: right;
            font-size: 12px;
          }
        }
        swiper {
          height: 220px;
          swiper-item {
          }
        }
        .card {
          position: relative;
          display: inline-block;
          width: 500rpx;
          margin-top: 59px;
          border-radius: 8px;
          box-shadow: 0 2px 15px 0 rgba(0,0,0,.15);
          .goods-img {
            position: absolute;
            display: block;
            top: -124rpx;
            left: 30rpx;
            border-radius: 8px;
            width: 440rpx;
            height: 248rpx;
          }
          .box {
            padding: 154rpx 20px 20px;
            .name {
              margin-bottom: 5px;
              .text-right {
                float: right;
                font-size: 12px;
              }
            }
            .info {
              font-size: 12px;
              margin-bottom: 5px;
            }
            .rate {
            }
          }
        }
      }
    }
  }
</style>
